<template>
	<view class="physical-goods">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y list" @scrolltolower="lower">
			<view class="more-header">
				<view class="more-header-orange">
					<view class="more-search">
						<u-search placeholder="请输入商品" class="search-input" v-model="searchStr"
							@change="pageNum=1;getGoodsList()" :show-action="false">
						</u-search>
					</view>
					<view class="more-menu">
						<view class="more-tabs">
							<u-tabs :list="menuList" :is-scroll="true" active-color="#fff" bg-color="transparent"
								:active-item-style="{'font-size':'14px'}" inactive-color="#fff" :font-size="26"
								:bar-width="100" :current="currentIndex" @change="handleMenuClick">
							</u-tabs>
						</view>
						<view class="more-all" @click="handleAll">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
				</view>
				<view class="more-header-white">
					<view class="more-menu-item" v-for="(item,i) in menuList[currentIndex].children"
						@click="navigateToList(item)">
						<view class="menu-item-img">
							<image :src="item.image"></image>
						</view>
						<view class="menu-item-text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="more-content">
				<div class="shop-top-box">
					<div class="shop-box" @click="navigateTo(1)">
						<div class="title">
							<u-image width="35" height="35" src="/static/home/icon_fire.png"></u-image>
							<text class="name">今日爆品</text>
						</div>
						<div class="shop-detail" v-if=" commodityProduct===''">
							<u-loading mode="circle" size="28"></u-loading> 加载中……
						</div>
						<div class="shop-detail" v-else-if="commodityProduct.length==0">
							暂无商品
						</div>
						<swiper v-else :circular="true" :vertical="true" :autoplay="true" :interval="5000"
							:duration="500">
							<swiper-item class="t-list category-list" v-for="(item,index) in commodityProduct "
								:key="index">
								<!--  分类详情 -->
								<view class="t-item">
									<u-image border-radius='8' :src="item[0].small" :lazy-load="true"></u-image>
									<text class="text">{{item[0].goodsName}}</text>
								</view>
								<view class="t-item">
									<u-image border-radius='8' :src="item[1].small" :lazy-load="true"></u-image>
									<text class="text">{{item[1].goodsName}}</text>
								</view>
							</swiper-item>
						</swiper>
					</div>
					<div class="shop-box" @click="navigateTo(2)">
						<div class="title">
							<u-image width="35" height="35" src="/static/home/icon_news.png"></u-image>
							<text class="name">新品优选</text>
						</div>
						<div class="shop-detail" v-if="commodityShop===''">
							<u-loading mode="circle" size="28"></u-loading> 加载中……
						</div>
						<div class="shop-detail" v-else-if="!(commodityShop&&commodityShop.length>0)">
							暂无新品
						</div>
						<swiper :circular="true" :vertical="true" v-else :autoplay="true" :interval="5000"
							:duration="500">
							<swiper-item class="t-list category-list" v-for="(item,index) in commodityShop "
								:key="index">
								<!--  分类详情 -->
								<view class="t-item">
									<u-image border-radius='8' :src="item[0].original" :lazy-load="true"></u-image>
									<text class="text">{{item[0].goodsName}}</text>
								</view>
								<view class="t-item">
									<u-image border-radius='8' :src="item[1].original" :lazy-load="true"></u-image>
									<text class="text">{{item[1].goodsName}}</text>
								</view>
							</swiper-item>
						</swiper>
					</div>
				</div>
				<view class="more-content-list">
					<view class="content-list-category">
						<view class="category-item" :class="{active:activeIndex==1}" @click="handleCategoryChange(1)">
							<view class="category-item-img">
							</view>
							<view class="category-item-text">
								按销量
							</view>
						</view>
						<view class="category-item" :class="{active:activeIndex==2}" @click="handleCategoryChange(2)">
							<view class="category-item-img">
							</view>
							<view class="category-item-text">
								按评价
							</view>
						</view>
					</view>
					<view class="content-list">
						<div class="goods-item bp" @click="navigateToDetailPage(item)" v-for="item,i in goodsList"
							:key="i">
							<div class="goods-img">
								<image class="image" :src="item.thumbnail" mode="aspectFill">
								</image>
							</div>
							<div class="goods-desc">
								<div class="goods-title">
									{{ item.goodsName||'' }}
								</div>
								<div class='evaluate'>
									<span class='grade'>{{item.score||0.0}}分</span>
									<span class='sales'>
										月售 {{item.monthSales ||0}}+
									</span>
								</div>
								<div class="goods-bottom">
									<div class="goods-price">
										<text class="hb-money"></text>
										<text class="hb-money text-limit2">
											{{ item.price | unitPrice }}
										</text>
									</div>
								</div>
							</div>
						</div>
					</view>
					<uni-load-more class='base' :content-text="contentText" status="no-more">
					</uni-load-more>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCategoryList,
		newGoods
	} from "@/api/goods.js";
	import {
		GetHotGoods,
		GetGoodPage,
	} from "@/api/home" //获取楼层装修接口
	export default {
		data() {
			return {
				contentText: {
					contentnomore: '我是有底线的~',
				},
				searchStr: '',
				currentIndex: 0,
				menuList: [],
				goodsList: [],
				activeIndex: 1,
				commodityProduct: '', //今日爆品
				commodityShop: '', //新品
				scrollTop: 0,
				pageNum: 1,
				pageSize: 10,
				total: 0,
			};
		},
		onLoad(option) {
			this.loadMenus()
			this.initData()
			this.getGoodsList()
		},
		onShow() {
			this.getGoodsList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.getGoodsList();
		},
		methods: {
			// 跳转路由
			navigateTo(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/product/hotstuff/hotstuff?name=今日爆品'
					})
				} else {
					uni.navigateTo({
						url: '/pages/product/hotstuff/hotstuff?name=新品优选'
					})
				}

			},
			initData() {
				// 初始化数据
				this.commodityProduct = '' //热销商品
				this.commodityShop = '' //新店新品
				//热销商品
				GetHotGoods({
					pageSize: 10,
					pageNumber: 1,
					selfOperated: '1',
					recommend: false,
					marketEnable: "UPPER",
				}).then((res) => {

					if (res.data && res.data.success) {
						let imagelist = []
						let paramsImage = []
						for (let i = 0; i < res.data.result.records.length; i++) {
							paramsImage.push(res.data.result.records[i])
							if (paramsImage.length == 2) {
								imagelist.push(paramsImage)
								paramsImage = []
							}
						}
						if (paramsImage.length != 0) {
							imagelist.push(paramsImage)
							paramsImage = []
						}
						this.commodityProduct = imagelist
					} else {
						this.commodityProduct = []
					}
				})
				// 新品
				newGoods({
					pageSize: 10,
					pageNumber: 1,
					marketEnable: 'UPPER',
				}).then((res) => {
					if (res.data && res.data.success) {
						let imagelist = []
						let paramsImage = []
						for (let i = 0; i < res.data.result.records.length; i++) {
							paramsImage.push(res.data.result.records[i])
							if (paramsImage.length == 2) {
								imagelist.push(paramsImage)
								paramsImage = []
							}
						}
						if (paramsImage.length != 0) {
							imagelist.push(paramsImage)
							paramsImage = []
						}
						this.commodityShop = imagelist
					} else {
						this.commodityShop = []
					}
				})
			},
			getGoodsList() {
				// 实物商品
				GetGoodPage({
					pageSize: this.pageSize,
					pageNumber: this.pageNum,
					marketEnable: "UPPER",
					goodsName: this.searchStr,
					type: this.activeIndex
				}).then((res) => {
					if (res.data && res.data.success) {
						// 如果是第一页，清空数组，重新赋值
						if (this.pageNum === 1) {
							this.goodsList = res.data.result.records
						} else { //其他为上拉加载更多，合并数组
							this.goodsList = this.goodsList.concat(res.data.result.records)
						}
						// 如果没有查询到数据，代表没数据了，pageNum-1
						if (res.data.result.records?.length <= 0) {
							this.pageNum--
						}
						this.total = res.data.result.total
					} else {
						this.goodsList = []
					}
					uni.stopPullDownRefresh();
				})
			},
			navigateToList(item) {
				uni.navigateTo({
					url: `/pages/search/goods?category=${item.id}&name=${item.name}`,
				});
			},
			// 上拉到底部加载更多
			lower() {
				this.pageNum++
				this.getGoodsList()
			},
			// 商品详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${item.skuList[0].id}&goodsId=${item.id}`,
				});
			},
			handleCategoryChange(index) {
				this.activeIndex = index

				this.getGoodsList()
			},
			// 菜单单击事件
			handleMenuClick(index) {
				this.currentIndex = index
			},
			// 跳转全部分类
			handleAll() {
				uni.navigateTo({
					url: `/pages/search/category?one=0&two=0`,
				})
			},
			// 菜单加载
			async loadMenus() {
				let list = await getCategoryList(0);
				if (list.data.code == 200 && list.data && list.data.result && list.data.result.length > 1) {
					this.menuList = list.data.result[1].children
				}
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.physical-goods {
		background: #EBECED;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.list {
			width: 100%;
			flex: 1 0 0;
			overflow-x: hidden;
			overflow-y: auto;
		}

		.more-header {
			.more-header-orange {
				background: #E84B08;

				.more-search {
					padding: 20rpx;
				}

				.more-menu {
					display: flex;
					justify-content: space-between;

					.more-all {
						width: 52rpx;
						height: 52rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 14rpx 20rpx;
						color: #fff;
						font-size: 36rpx;
					}

					.more-tabs {
						width: 80%;
						flex: 1;
					}
				}
			}

			.more-header-white {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 0 20rpx;
				background: #FFFFFF;

				.more-menu-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin: 30rpx 0;

					.menu-item-img {
						width: 84rpx;
						height: 84rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.more-content {
			flex: 1;
			overflow-x: hidden;
			overflow-y: auto;

			.shop-top-box {
				display: flex;
				justify-content: space-between;
				margin-top: 14rpx;

				.shop-box {
					flex: 0 0 49%;
					height: 100%;
					background: #FFFFFF;
					padding: 26rpx 16rpx;

					.title {
						display: flex;
						font-size: 26upx;
						font-weight: bold;
						color: rgba(36, 36, 36, 1);

						.name {
							margin-left: 13upx;
						}
					}

					.t-list {
						display: flex;
					}

					.t-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						flex: 0 0 49%;

						/deep/ .u-image {
							width: 130rpx !important;
							height: 130rpx !important;
							margin-bottom: 8upx !important;
						}

						.text {
							overflow: hidden; //超出部分隐藏
							text-overflow: ellipsis; //超出部分显示...
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							font-size: 24rpx;
						}
					}

					.shop-detail {
						margin-top: 24upx;
						height: 120upx;
						display: flex;
						align-items: center;
						justify-content: center;

						.goods-img {
							display: flex;
							align-items: center;
							justify-content: center;

							.image {
								flex: 0 0 48%;
								height: 120upx;
							}
						}
					}
				}
			}

			.more-good-store {
				background: #FFFFFF;
				margin-top: 14rpx;

				.good-store-title {
					display: flex;
					padding: 20rpx;

					.good-store-title-icon {
						background-image: url(../../../static/img/more-location.png);
						width: 50rpx;
						height: 50rpx;
						margin-right: 6rpx;
					}

					.good-store-text {
						flex: 1;
						line-height: 50rpx;
						color: #242424;
						font-size: 26rpx;
						font-weight: 700;
					}
				}

				.good-store-list {
					display: flex;
					width: 100%;
					overflow-x: auto;
					overflow-y: hidden;
					flex-wrap: nowrap;
					padding: 20rpx;

					.good-store-list-item {
						width: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						margin-right: 12rpx;

						.item-img {
							width: 220rpx;
							height: 220rpx;
							border-radius: 8rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-text {
							color: #242424;
							font-size: 24rpx;
							font-weight: 400;

						}

					}
				}
			}

			.more-content-list {
				padding: 0 16rpx;

				.content-list-category {
					display: flex;
					justify-content: space-around;
					padding: 24rpx;

					.category-item {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.category-item-img {
							width: 30rpx;
							height: 30rpx;
							background: url(../../../static/img/sale.png) no-repeat;
							background-size: 100% 100%;
						}

						.category-item-text {
							color: #424040;
							font-size: 26rpx;
							font-weight: 400;
						}
					}

					.category-item.active {
						.category-item-img {
							background: url(../../../static/img/saleActive.png) no-repeat;
							background-size: 100% 100%;
						}

						.category-item-text {
							color: #E63214;
						}
					}

					.category-item:nth-child(2) {
						.category-item-img {
							background: url(../../../static/img/evaluate.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item.active:nth-child(2) {
						.category-item-img {
							background: url(../../../static/img/evaluateActive.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item:last-child {
						.category-item-img {
							background: url(../../../static/img/distance.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item.active:last-child {
						.category-item-img {
							background: url(../../../static/img/distanceActive.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.content-list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.goods-item {
						position: relative;
						display: flex;
						align-items: center;
						flex-direction: column;
						margin-bottom: 36upx;
						width: 346upx;
						height: 524upx;
						background: rgba(255, 255, 255, 1);
						border-radius: 16upx;

						.goods-img {
							.image {
								width: 346upx;
								height: 346upx;
								border-radius: 16rpx 16rpx 0rpx 0rpx;
							}
						}

						.goods-desc {
							width: 318upx;
							height: 148upx;

							.goods-title {
								margin: 5upx 0 8upx 0;
								font-size: 26upx;
								font-weight: bold;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.evaluate {
								display: flex;
								justify-content: space-between;
								align-items: center;
								color: rgba(255, 137, 33, 1);

								.sales {
									font-size: 20upx;
									color: rgba(173, 170, 170, 1);
								}
							}

							.goods-price {
								font-size: 32rpx;
								margin-top: 15upx;
							}

							.site {
								font-size: 20rpx;
								color: rgba(173, 170, 170, 1);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-bottom: 8upx;
							}

							.distance {
								display: flex;
								justify-content: flex-end;
								font-size: 20upx;
								color: rgba(23, 23, 23, 1);
							}
						}
					}
				}
			}
		}
	}
</style>
